<template>
  <div class="container">
    <el-form ref="ruleForm" :model="query" label-width="120px">
      <el-form-item label="任务标题">
        <el-input
          disabled
          v-model="query.taskTitle"
          placeholder="请输入任务标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位业态">
        <el-checkbox-group v-model="query.bodyIndustry">
          <el-checkbox
            disabled
            :label="item.bodyIndustryRemarks"
            name="type"
            v-for="item in query.bodyIndustryList"
            :key="item.id"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="区域">
        <el-checkbox-group v-model="query.area">
          <el-checkbox
            disabled
            :label="item.areaName"
            name="type"
            v-for="item in query.areaList"
            :key="item.areaCode"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="完成截止时间">
        <el-date-picker
          disabled
          v-model="query.completionDeadline"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="处理地址">
        <el-input disabled v-model="query.processingAddress">
          <template slot="prepend">Http://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="任务内容">
        <quill-editor disabled :content="query.taskContent" :options="editorOption" />
      </el-form-item>
      <el-form-item label="相关附件">
        <el-upload
          disabled
          :file-list="query.unitModuleTaskFileSaveRequestList"
          drag
          :limit="9"
          :action="$upload"
            :headers="$headers()"
          :on-preview="
            (e) => {
              $downloadFiles(e.fileUrl);
            }
          "
          multiple
          :before-upload="
            (e) => {
              return $beforeAvatarUpload(e, 1);
            }
          "
        >
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { quillRedefine } from "vue-quill-editor-upload";
export default {
  created() {
    let data = JSON.parse(sessionStorage.getItem("viewTask"));
    this.query.bodyIndustryList = data.unitModuleTaskFormatResponseList;
    this.query.areaList = data.unitModuleTaskAreaResponseList;
    this.query.completionDeadline = data.completionDeadlineStr;
    this.query.createUnitId = data.createUnitId;
    this.query.createUnitName = data.createUnitName;
    this.query.id = data.id;
    this.query.releaseStatus = data.releaseStatus;
    this.query.processingAddress = data.processingAddress;
    this.query.releaseTime = data.releaseTime;
    this.query.taskSource = data.taskSource;
    this.query.taskContent = data.taskContent;
    this.query.taskTitle = data.taskTitle;
    this.query.area = data.unitModuleTaskAreaResponseList.map((x) => x.areaName);
    this.query.bodyIndustry = data.unitModuleTaskFormatResponseList.map(
      (x) => x.bodyIndustryAndBodyIndustryRemarks
    );
    data.unitModuleTaskFileResponseList.forEach((x) => {
      x.name = x.fileName;
    });
    this.query.unitModuleTaskFileSaveRequestList = data.unitModuleTaskFileResponseList;
    //  this.query.bodyIndustry=data.bodyIndustryList
    //  this.query.areaList=data.unitModuleTaskAreaResponseList

    //  query: {
    //   completionDeadline: "",
    //   createUnitId: "12515115144224",
    //   createUnitName: "苏州亿通",
    //   id: "",
    //   processingAddress: "",
    //   releaseStatus: 0,
    //   releaseTime: "",
    //   remark: "",
    //   taskContent: "",
    //   taskSource: "苏州市市场监督管理局",
    //   taskTitle: "",
    //   areaList: [],
    //   area: [],
    //   unitModuleTaskAreaSaveRequestList: [],
    //   unitModuleTaskFileSaveRequestList: [],
    //   unitModuleTaskFormatSaveRequestList: [],
    //   bodyIndustryList: [],
    //   bodyIndustry: [],
    //   unitNumber: 0,
    // },

    this.editorOption = quillRedefine({
      // 以下所有设置都和vue-quill-editor本身所对应
      placeholder: "请输入编辑文章内容", // 可选参数 富文本框内的提示语
      theme: "", // 可选参数 富文本编辑器的风格
      toolOptions: [
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block"],
        [{ header: 1 }, { header: 2 }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ direction: "rtl" }],
        [{ size: ["small", false, "large", "huge"] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ["clean"],
        ["link", "image"],
      ], // 可选参数  选择工具栏的需要哪些功能  默认是全部
      handlers: {},
    });
  },
  data() {
    return {
      editorOption: {},
      query: {
        completionDeadline: "",
        createUnitId: "12515115144224",
        createUnitName: "苏州亿通",
        id: "",
        processingAddress: "",
        releaseStatus: 0,
        releaseTime: "",
        remark: "",
        taskContent: "",
        taskSource: "苏州市市场监督管理局",
        taskTitle: "",
        areaList: [],
        area: [],
        unitModuleTaskAreaSaveRequestList: [],
        unitModuleTaskFileSaveRequestList: [],
        unitModuleTaskFormatSaveRequestList: [],
        bodyIndustryList: [],
        bodyIndustry: [],
        unitNumber: 0,
      },
    };
  },
  methods: {},
  // 监听属性
  watch: {},
           //实例销毁之前
      beforeDestroy(){
            sessionStorage.removeItem("viewTask")
  },
};
// query.area
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
  .checkbox {
    display: flex;
    .checkbox_last {
      margin-right: 15px;
    }
  }
  .form_button {
    text-align: right;
  }
  /deep/ .el-upload {
    display: none;
  }
}
</style>
